﻿<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>主页</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="/static/css/global.css">

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/npm.js"></script>

    <script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.js"></script>
</head>

<body style="margin: 0px 1em;">
<nav class="navbar navbar-default">
    <div class="container navbar-left">
        <div class="navbar-header">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=239129897,3568102276&fm=26&gp=0.jpg"
                 alt="图标" class="navbar-brand">
        </div>

        <ul class="nav navbar-nav">
            <!--                <li class="active"><a href="#">你好</a></li>-->
            <!--                <li><a href="http://172.20.34.120:5000/file_list" class="pull-right visible-lg text-center">多文件上传</a></li>-->
             <li><a href="/view_file" class="pull-right visible-lg text-center">查看服务器文件</a></li>
<!--             <li><a href="/terminal_actual?test=true" target="_blank" class="pull-right visible-lg text-center">假的终端页面</a></li>-->
        </ul>

        <form action="/home" method="POST" class="navbar-form navbar-right">
            <div class="input-group">
                <input type="submit" name="logout" id="logout" class="btn btn-danger" value="退出登录">
            </div>
        </form>
    </div>
</nav>

<div class="panel-group" id="articles">


</div>

<a href="#" class="btn btn-info" style="display: block;" id="addart">新建文章</a>
<a href="#" class="btn btn-info" style="display: none;" id="getart">获取列表</a>
<script>

    // const URL = 'http://172.20.34.120:5000';
    const URL = '';
    var rcvdata;
    var articleId;
    $.ajaxSetup({async: false});
    var username;

    function query_username() {
        $.ajax({
            type: 'post',
            url: URL + '/json/username',
            data: username,
            contentType: false,
            processData: false,
            xhrFields: {withCredentials: true},
            crossDomain: true,
            success: function (data) {
                console.log(data);
            },
        });
    };
    query_username();
    $("#addart").on("click", function () {
        let formdata = new FormData();

        let title = prompt("请输入文章标题");
        if (title.length !== 0) {
            formdata.append("title", title);
        }
        if (title.length === 0) {
            title = 'new title';
            formdata.append("title", title);
        }
        console.log(title);
        $.ajax({
            url: URL + '/json/create_article',
            data: formdata,
            type: "POST",
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            xhrFields: {withCredentials: true},
            crossDomain: true,
            success: function (data) {//data就是从服务器上接收的数据，可以是字符串，也可以是数组或字符串组
                console.log(data);
                articleId = data["id"];
                // window.open("edit.html?id=" + articleId,"_blank");
                // window.location.href = "/edit?id=" + articleId;
                window.open(location.origin + '/edit?id=' + articleId + '&title=' + title, '_blank')
            }
        });
        return false;
    });

    function query_articleList() {
        $.ajax({
            type: 'post',
            url: URL + '/json/article_list',
            data: rcvdata,
            contentType: false,
            processData: false,
            xhrFields: {withCredentials: true},
            crossDomain: true,
            success: function (data) {
                rcvdata = data;
                console.log(data);
            },
        });

        for(var ever in rcvdata){
                var newhtml = '<div class="panel panel-info"><div class="panel-heading"><div class="panel-title"><a href="#art_'+ever+'" data-toggle="collapse" data-parent="#articles"><h4 id="'+ever+'">'+rcvdata[ever]["title"]+'</h4></a></div><p>修改时间：'+rcvdata[ever]["edit_time"]+'<br>创建时间：'+rcvdata[ever]["create_time"]+'</p></div><div class="panel-collapse collapse" id="art_'+ever+'"><hr><p>'+rcvdata[ever]["content"].slice(0, 120)+'</p><hr><div class="row"><div class="col-md-1 artedit" id="editid'+ever+'"><a class="btn btn-primary" >编辑文章</a></div><div class="col-md-1 artremove" id="art_'+rcvdata[ever]["title"]+'"><a href="" class="btn btn-primary" >删除文章</a></div><div class="col-md-1 artupload"><a class="btn btn-primary" >上传至终端</a></div></div></div></div>';
                $("#articles").append(newhtml);
            }

        $(".artupload").on("click", function () {
            var nodeid = this.previousElementSibling.previousElementSibling.id.slice(6);
            var nodetitle = this.previousElementSibling.id.slice(4);
            // window.open("上传页面.html?id=" + nodeid + "&title=" + nodetitle, "_blank");
            window.open(location.origin + '/upload?id=' + nodeid + '&title=' + nodetitle, '_blank');
            return false;
        });
        $(".artedit").on("click", function () {
            var nodetitle = this.nextElementSibling.id.slice(4);
            // window.open("edit.html?id=" + this.id.slice(6) + "&title=" + nodetitle, "_blank");
            // location.href = location.origin + '/edit' + '?id=' + this.id.slice(6) + "&title=" + nodetitle;
            window.open(location.origin + '/edit' + '?id=' + this.id.slice(6) + '&title=' + nodetitle, '_blank');
        });

        $(".artremove").on("click", function () {
            $(this.parentNode.parentNode.parentNode).remove();
            var newdata = new FormData();
            var nodeid = this.previousElementSibling.id.slice(6);
            var nodetitle = this.id.slice(4);
            newdata.append("delete", true);
            newdata.append('id_debug', nodeid)
            newdata.append('title_debug', nodetitle);
            $.ajax({
                url: URL + '/edit',
                data: newdata,
                type: "POST",
                dataType: false,
                cache: false,//上传文件无需缓存
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须
                xhrFields: {withCredentials: true},
                crossDomain: true,
                success: function (data) {//data就是从服务器上接收的数据，可以是字符串，也可以是数组或字符串组
                    //console.log(data);

                }
            });
            return false;
        });
    };

    $("#getart").on("click", function () {
        query_articleList();
        return false;
    });
    window.onload = function () {
        $("#getart").click();
    }
</script>
</body>

</html>